<template>
	
 	<div class="layui-layout layui-layout-admin" >
 	  <div class="adminnav1">	
        <Pagetop></Pagetop>
      </div>
      <div class="adminnav2">	
       	<Secondnav urlname="shopmall"></Secondnav>
      </div>
      
      <!-- 主体内容 -->
      <div class="layui-body kedou-admin" id="LAY_app_body app">
	    <div class="layadmin-tabsbody-item layui-show">
	    	<div class="pagelist">
	    		 <div class="layui-card-body">
		      		<fieldset class="layui-elem-field layui-field-title">
					  <legend>商品导入</legend>
					</fieldset>
		      	</div>
		        <div class="layui-card-body">
		        	<div class="layui-form" lay-filter="">
		        		<div style="overflow:hidden;margin-bottom:30px;"><label style="font-weight:bold;color:red;line-height:40px;">请先下载exl模板填写会员信息然后导入上传：</label><button class="layui-btn layui-btn-warm" @click="down" id="getdome">下载模板</button></div>
                    </div>
		        	<div class="layui-form" v-if="show==0">
			        	
									<div class="layui-form-item">
										<label class="layui-form-label">所选门店</label>
								    <div class="layui-input-inline">
											<select name="shopId" lay-filter="shopId"  v-model="itemData.shopId">
												<option v-for="item in shoplist" :value="item.id" >{{item.name}}</option>													
											</select>
										</div>		
									</div>
					        <div class="layui-form-item">
										 <label class="layui-form-label">商品分组</label>
									    <div class="layui-input-inline">
												<select name="groupId" lay-filter="groupId"  v-model="itemData.groupId">
													<option v-for="item in grouplist" :value="item.id" >{{item.name}}</option>
												</select>
											</div>		
									</div>
							    <div class="layui-form-item">
								    <label class="layui-form-label">商品分类</label>
								    <div class="layui-input-block">
								    		<div class="fllist">
								    			<ul v-if="fllist[0].length>0">
								    				<li :class="flcur[0]==item.id?'cur':''" v-for="item in fllist[0]" @click="getfl(item.id,1)">{{item.name}}</li>
								    			</ul>
								    			<ul v-if="fllist[1].length>0">
								    				<li :class="flcur[1]==item.id?'cur':''" v-for="item in fllist[1]" @click="getfl(item.id,2)">{{item.name}}</li>
								    			</ul>
								    			<ul v-if="fllist[2].length>0">
								    				<li :class="flcur[2]==item.id?'cur':''" v-for="item in fllist[2]" @click="getfl(item.id,3)">{{item.name}}</li>
								    			</ul>
								    			<ul v-if="fllist[3].length>0">
								    				<li :class="flcur[3]==item.id?'cur':''" v-for="item in fllist[3]" @click="getfl(item.id,4)">{{item.name}}</li>
								    			</ul>
								    			
								    		</div>
								    </div>	
								    
								</div>
									
							   						
									
									<div class="layui-form-item">
										<div class="layui-input-block">
											<button class="layui-btn layui-btn-normal" lay-submit lay-filter="setmyinfo" @click="confirmOk">批量导入商品</button>
										</div>
									</div>
					</div>	
					<div class="layui-form" v-else>
						<div class="layui-form-item">
							<label class="layui-form-label">logo文件</label>
						    <div class="layui-input-inline" style="width: 180px;">
							    <div class="layui-upload">
								    <button type="button" class="layui-btn" id="upload01">上传logo压缩包</button>	
								</div>
							</div> 
							<div class="layui-input-inline" id='up01' style="width: 380px;">请选择上传本地的logo图片压缩包，格式为zip/rar格式</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">详情图片</label>
						    <div class="layui-input-inline" style="width: 180px;">
							    <div class="layui-upload">
								    <button type="button" class="layui-btn" id="upload02">上传详情图片压缩包</button>	
								</div>
							</div>  
							<div class="layui-input-inline" id='up02' style="width: 380px;">请选择上传本地的详情图片压缩包，格式为zip/rar格式</div>
						</div>
						<div class="layui-form-item">
						    <label class="layui-form-label">商品xls文件</label>
						    <div class="layui-input-inline" style="width: 180px;">
							    <div class="layui-upload">
								    <button type="button" class="layui-btn" id="upload03">上传xls格式的文档</button>	
								</div>
							</div>  
							
						</div>
						<div class="layui-form-item">
							<div class="layui-input-block">
								<button class="layui-btn layui-btn-danger" @click="cancle">返回上一步</button>
							</div>
						</div>
					</div>
					
                                <div class="form-group" style="overflow:hidden; margin-top:50px; border-bottom:1px solid #eee;">
                                <label class="control-label col-sm-3 col-md-2"></label>
                                <div style="overflow:hidden;">商品批量导入要求：<br/> 
                                1.商品名称不能相同<br/>
                                2.规格 ,库存 ，售价 ，原价 ，重量 ：<br/>
                                例如：[颜色:红色,尺寸:XL,库存:10,售价:10,原价:10,重量:10];[颜色:白色,尺寸:XL,库存:10,售价:10,原价:10,重量:10]<br/>
                                但不用规格时：[库存:10,售价:10,原价:10,重量:10]<br/>
                                <label>注意：逗号和分号用英文。</label><br/>
                                3.商品图片logo和详情图片写上传的压缩文件的名称。<br/>
                                4.商品分类的ID可以不填，填了就按照商品分类的ID来创建。<br/>
                                5.Logo图片名称和详情图片名称：<br/>
                                例如：当商品logo的压缩包和详情图片压缩包是一样的话，如何填写图片名称，就按照图片名称来，当1个压缩文件只有1张logo和3张详情图的话，可以不写图片名称，按照顺序排，第一张为logo图，后面三张为详情图。<br/>
                                例如；商品logo的压缩包和详情图片一个压缩包可以为一张或多张，多张要填写图片名称。图片名称<br/>
                                例如：如果压缩文件里面有文件夹，图片名称为(文件夹/图片名称）；<br/>
                                6.结算价规格（填写 1-数值  2 - 比例（可不填）例如：1,2） 
                                结算价（可不填）例如：10.1,10.2，
                                如何要填写的话，请填写数量跟规格[]数量一致。
                                <br/><br/>
                               </div>
		        	</div>
		        </div>		      
	        </div>
	    </div>
	  </div>  
	     
	</div>
</template>
<script>
import Pagetop from '../../common/pagetop.vue'
import Secondnav from '../../common/secondnav.vue'
import Vue from 'vue' 
export default {	
  name: 'shopmalldr',  
  components: {Pagetop,Secondnav},	  
  data () {
    return {  
    	itemData:{logo:"",status:1,detailcontent:""},
    	fllist:[[],[],[],[]],
    	flcur:[],
    	ruslist:[],
    	shoplist:[],
    	grouplist:[],
    	show:0,
    	cupload01:0,
    	cupload02:0,
    	
    }
  },
  mounted(){ 
  	var _this = this;
  	this.getshop();
  	this.getfz();
  	this.getfl(1,0);
    
  },
  methods: {  
  		down:function(){
  			var url=apiurl+"/commodity/downloadTemplate/commodityimportmembertemplate";
  			location.href=url;
  		},
		getshop:function(){
			var _this = this; 										      	
		    var url='/commodity/getShopsByDealerId'
		    var dates={
		    	dealerId:localStorage.getItem("id")
		    }
			ajaxRequest(url,'GET','json',dates,function(ret,err){
				_this.shoplist=ret.content;
				_this.itemData.shopId=ret.content[0].id;
			})				
			
		},		
		getfz:function(){
			var _this=this;
	  		var dates={
	  			dealerId:localStorage.getItem("id"),			
	  			shopId:localStorage.getItem("shopId")
	  		}
				var url="/commodity/getShopGroups";		
	  		ajaxRequest(url,'GET','json',dates,function(ret,err){ 
	  		 	_this.grouplist=ret.content;
	  		 	_this.itemData.groupId=ret.content[0].id;
	  		})
		},
  	getfl:function(pid,index){//分类
  		if(pid!=1){
  			this.itemData.categoryId=pid;
  			this.flcur[index-1]=pid;
  		}
  		var _this=this;
  		var data={
  			parentId:pid,			
  		}
  		var url = "/category/getSubCategories";
  		ajaxRequest(url,'GET','json',data,function(ret,err){ 
  			 for(var i=index;i<4;i++){
  			 	var arr=[];
  			 	Vue.set(_this.fllist,i,arr);
  			 }
  		   Vue.set(_this.fllist,index,ret.content)
  		})
  	},
  	
	confirmOk:function(){
		var _this = this;   	
		if(!this.itemData.categoryId){
			layer.msg('请选择分类');
			return false;
		}
		this.show=1;
		var _this=this;
		setTimeout(function(){
			layui.use('upload', function(){
				var upload = layui.upload;
				upload.render({
				    elem: '#upload01'//绑定元素
				    ,url:apiurl+'/upload/uploadCommodityZip' //上传接口
				    ,accept: 'file' //普通文件
				    ,exts: 'zip|rar'
				    ,done: function(res){
				    	if(res.code!=300){
				    		layer.msg('上传成功');
				    		_this.cupload01=1;
				    		$("#up01").text("已上传成功")
				    	}
				    	else{
				    		layer.msg(res.msg);
				    	}
				    }
				    ,error: function(){
				      layer.msg('上传失败');
				    }
				});
				upload.render({
				    elem: '#upload02'//绑定元素
				    ,url:apiurl+'/upload/uploadCommodityZip' //上传接口
				    ,accept: 'file' //普通文件
				    ,exts:'zip|rar'
				    ,done: function(res){
				    	if(res.code!=300){
				    		layer.msg('上传成功');
				    		_this.cupload02=1;
				    		$("#up02").text("已上传成功")
				    	}
				    	else{
				    		layer.msg(res.msg);
				    	}
				    }
				    ,error: function(){
				      layer.msg('上传失败');
				    }
				});
				upload.render({
				    elem: '#upload03'//绑定元素
				    ,url:apiurl+'/commodity/importShopCommodity' //上传接口
				    ,accept: 'file' //普通文件
				    ,exts: 'xls|xlsx'
				    ,data: {
					  shopId: _this.itemData.shopId,
					  groupId: _this.itemData.groupId,
					  categoryId: _this.itemData.categoryId
					}
				    ,headers:{"Authorization":localStorage.getItem("token")}
				    ,done: function(res){
				    	if(res.code!=300){
				    		if(_this.cupload01==1&&_this.cupload02==1){
				    			layer.msg('上传成功');
				    			setTimeout(function(){
				    				_this.$router.push({path:'/shopmallList'})
				    			},1000)
				    		}
				    		else{
				    			layer.msg('请先上传logo跟详情文件后再上传模板文件');
				    		}
				    	}
				    	else{
				    		layer.msg(res.msg);
				    	}
				    }
				    ,error: function(){
				      layer.msg('上传失败');
				    }
				});
			})
		},300)
	},
	cancle:function(){
		this.show=0;
	}
  },
  updated:function(){		
	var _this = this;
	layui.use('form', function(){
	  var form = layui.form;
	  form.render();
	  form.on("select(groupId)", function(data){										
		   _this.itemData.groupId = data.value
	  });
	  form.on("select(shopId)", function(data){										
		   _this.itemData.shopId = data.value
	  });
	});
		
  },
}
</script>
<style>
	#J_imageView img{width:400px;display:block;}
	.fllist ul{display:inline-block; width: 20%;height:250px;margin-right:1%;overflow:hidden;overflow-y:scroll;border:1px solid #eee;}
	.fllist ul li{height:30px;line-height:30px;padding:5px 20px;border-bottom:1px solid #eee;cursor:pointer;}
	.fllist ul li.cur{ background-color:#3276df;color:#fff;}
	#demo2 img{display:inline-block;margin-right:10px;width:100px;height:100px;}
</style>
